<template>
    <div>
      <el-card>
        <el-page-header content="工作发布列表"  icon="" title="工作展示管理" />
        <el-table :data="tableData" style="width: 100%">

          <el-table-column prop="title" label="工作标题" />

          <el-table-column prop="introduction" label="简要描述" />
  
          
  
          <el-table-column label="更新时间">
            <template #default="scope">
              {{ formatTime.gettime(scope.row.editTime) }}
            </template>
          </el-table-column>

  
          <el-table-column label="操作">
            <template #default="scope">

              <el-button circle :icon="Edit" @click="handleEdit(scope.row)"></el-button>
  
              <el-popconfirm
                title="你确定要删除吗？"
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="handleDelete(scope.row)"
                >
                <template #reference>
                  <el-button circle :icon="Delete" type="danger"> </el-button>
                </template>
              </el-popconfirm>
              
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
      <el-dialog v-model="dialogVisible" title="预览新闻" width="50%">
        <div>
          <h2>{{ previewData.title }}</h2>
          <div style="font-size: 12px; color: gray">
            {{ formatTime.gettime(previewData.editTime) }}
          </div>
          <el-divider>
            <el-icon>
              <star-filled />
            </el-icon>
          </el-divider>
          <div v-html="previewData.content" class="htmlcontent"></div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, reactive } from "vue";
  import axios from "axios";
  import formatTime from "@/util/formatTime.js";
  import {Edit, Delete} from "@element-plus/icons-vue";
  import { useRouter } from "vue-router";
  const router = useRouter()
  const tableData = ref([]);

  onMounted(() => {
    getTableData();
  });
  
  const getTableData = async () => {
    const res = await axios.get("/adminapi/work/list");
    // console.log(res.data)
    tableData.value = res.data.data;
  };
  

  
  //删除回调
  const handleDelete = async (item)=>{
      await axios.delete(`/adminapi/work/list/${item._id}`);
      getTableData();
  }   
  //编辑回调
  const handleEdit = (item)=>{
      router.push(`/work-manage/editwork/${item._id}`)
  }

  
  </script>
  
  <style lang="scss" scoped>
  .el-table {
    margin-top: 50px;
  }
  
  ::v-deep .htmlcontent{
      img{
          max-width:100%;
      }
  }
  </style>
  